<template>
  <div class="container-fluid">
    <div class="row zjml">章节目录</div>
    <div v-if="chapters.length === 0" class="row nolist">
      暂无章节 ~
    </div>
    <div v-else class="row zjlj" v-for="chapter in chapters" :key="chapter.id"  @click="goToChapter(chapter.id)">
      {{ chapter.chapter_title }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
import router from "@/router/index.js";
import config from "../../../config/config.js";

const route = useRoute(); // 获取路由参数
const novelId = route.params.novelId; // 获取小说 ID
const chapters = ref([]); // 存储章节数据
const loading = ref(true); // 加载状态
// 跳转到指定章节的函数
const goToChapter = (chapterId) => {
  router.push(`/chapter/${chapterId}`); // 路由跳转
};
// 格式化更新时间
const formatTime = (time) => {
  return new Date(time).toLocaleString(); // 格式化为本地时间
};

// 获取章节目录列表
const fetchChapters = async () => {
  try {
    const response = await axios.get(`${config.apiUrl}/novel-chapter/list?novelId=${novelId}`);
    chapters.value = response.data; // 存储章节目录
  } catch (error) {
    console.error("Error fetching chapters:", error); // 错误处理
  } finally {
    loading.value = false; // 结束加载状态
  }
};

onMounted(fetchChapters); // 在组件挂载时获取章节目录
</script>

<style scoped>
.nolist{
  padding: 10px;
}
.zjml{
  letter-spacing: 2px;
  font-size: 20px;
  font-weight: bold;
}
.zjlj{
  padding: 10px 2px;
  cursor: pointer;
  border-bottom: 1px solid #f2f2f2;
}
</style>
